<template>
	<view class="apply-for">
		<view class="commodity-info-box">
			<view class="order-list">
				<view class="shop-group" v-for="item in orderData.detailList" :key="item.shopId">
					<view class="shop-title" @click="navTo('/pages/sys/home/store?id=' + item.shopId)">
						<view>
							<u-image width="48rpx" height="48rpx" src="/static/image/store.png"></u-image>
						</view>
						<view style="margin: 0 10rpx;">{{ item.shop.shopName }}</view>
						<view>
							<u-icon name="arrow-right" color="#999"></u-icon>
						</view>
					</view>
					<view class="order-item" v-for="orderItem in item.detailList" :key="orderItem.id"
						@click="navTo('/pages/sys/home/product?id=' + orderItem.skuId)">
						<view>
			  		<u-image width="150rpx" height="150rpx" :src="orderItem.skuPic"></u-image>
						</view>
						<view style="width: calc(100% - 160rpx);margin-left: 10rpx;">
							<view class="hide-long-text">{{ orderItem.skuName }}</view>
							<view style="color: #AAA;margin: 10rpx 0;overflow: hidden;text-overflow: ellipsis;">
								{{ orderItem.skuAttrsVals == '' || orderItem.skuAttrsVals == null ? '暂无规格描述' : getAttr(orderItem.skuAttrsVals) }}
							</view>
							<view style="display: flex;">
								<view style="flex: 1;color: $font-color-dark;"><text
										style="font-size: 24rpx;">￥</text>{{ orderItem.skuPrice.toFixed(2) }}</view>
			 				<view style="flex: 1; text-align: right;color: #AAA;">× {{ orderItem.skuQuantity }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="price-box">
				共
				<text class="num">{{ countSkuNum(orderInfo) }}</text>
				件商品 实付款
				<text class="price">{{ orderInfo.totalAmount}}</text>
			</view>
		</view>
		<view class="border-partition"></view>
		
		<!-- 退款申请填写相关信息 -->
		<view class="return-center-box">
			<u-form labelWidth="140" labelPosition="left" :model="paramMap" :rules="rules" ref="uForm">
				<u-form-item label="退款原因" prop="returnInfo" borderBottom
					ref="item1">
					<u-input v-model="paramMap.returnInfo" disabled disabledColor="#ffffff" placeholder="请选择退款原因"
						:border="none" @click="brandStatus = true"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="描述" prop="name">
					<textarea style="height: 120rpx !important;" v-model="paramMap.description" disabledColor="#ffffff" placeholder="请输入退款描述"></textarea>
				</u-form-item>
				<u-form-item label="凭证图片" prop="descPics"  >
					<u-upload ref="uUpload" :action="uploadAction" maxCount="9"
						@on-success="(res, index, lists, name) => handleUpload(1, res, lists)" :header="uploadHeader" width="160"
						height="160" :showProgress="false" imageMode="aspectFit" :file-list="bodyImages">
					</u-upload>				
				</u-form-item>
			</u-form>
			<button class="return-botton" @click="confirmReturn">申 请 退 款</button>
		</view>
		
		<!-- 退款原因 -->
		<u-picker mode="selector" v-model="brandStatus" range-key="name"  :range="brandList" @confirm="brandConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 退款原因开关
				brandStatus: false,
				// 退款原因
				brandList: [],
				orderInfo: {},
				orderData: {},
				// 上传接口数据
				paramMap: {
					returnInfo: '',
					description: '',
					descPics: ''
				},
				// 凭证图片
				bodyImages: [],
				// 图片上传地址
				uploadHeader: {
					'yyt-shop-token': ''
				},
				uploadAction: this.$store.state.apiBaseUrl + 'common/upload',
			}
		},
		onLoad(e) {
			const that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('data', function(res) {
				console.log(res);
				that.orderInfo = res
				that.getOrderInfo(res.id)
			})
			this.getReturnReason()
			this.uploadHeader["yyt-shop-token"] = uni.getStorageSync('userToken')
		},
		methods: {
			// 获取有多少件商品
			countSkuNum(order) {
				let count = 0;
				if (order.itemList) {
					order.itemList.forEach(item => count += item.skuQuantity);
					return count;
				}
				return 0
			},
			// 获取订单信息
			getOrderInfo(id) {
				this.$api.request.getOrderDetailInfo({
					orderId: id
				}, res => this.orderData = res.data);
			},
			// 退款原因选择
			brandConfirm(e){
				console.log(e);
				this.paramMap.returnInfo = this.brandList[e[0]].name
			},
			// 点击确定申请退款
			confirmReturn(){
				if(this.paramMap.returnInfo == ''){
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					})
				}else {
					var strImage = "";
					if(this.bodyImages.length > 0){
						for(let i = 0; i < this.bodyImages.length; i++){
							strImage = strImage + this.bodyImages[i].response.data.url + ','
						}
					}
					strImage = strImage.substring(0,strImage.length - 1)
					let data = {
						orderId: this.orderInfo.id,
						orderSn: this.orderInfo.orderSn,
						memberUsername: uni.getStorageSync('userinfo').nickname,
						returnAmount: this.orderInfo.payAmount,
						returnName: this.orderInfo.receiverName,
						returnPhone: this.orderInfo.receiverPhone,
						status: 0,
						skuCount: this.countSkuNum(this.orderInfo),
						reason: this.paramMap.returnInfo,
						description: this.paramMap.description,
						descPics: strImage,						
					}
					this.$api.request.getReturnApplyMoney(data, res => {
						if(res.code == 200){
							setTimeout(function(){
								uni.showToast({
									title: "申请成功",
									icon: 'none',
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							},100)
						}
					})
				}
			},
			
			
			
			
			
			
			// 解析商品规格
			getAttr(attrVals) {
			  let attrVal = JSON.parse(attrVals);
			  return attrVal.key + " - " + attrVal.value;
			},
			// 处理图片上传
			handleUpload(idx, res, lists) {
				this.bodyImages = lists
			},
			// 获取退款原因列表
			getReturnReason(){
				this.$api.request.getReturnReason({}, res => {
					if(res.code == 200){
						this.brandList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-list {
		width: 100%;
		margin-top: 15rpx;

		.shop-group {
			margin-bottom: 6rpx;
			padding: 0 20rpx;
			background-color: #FFFFFF;

			.shop-title {
				display: flex;
				line-height: 48rpx;
				padding: 10rpx 20rpx;
				border-bottom: 2rpx #EEEEEE solid;
			}

			.order-item {
				display: flex;
				padding: 10rpx 0;
				border-bottom: 2rpx #EEEEEE solid;
			}
		}
	}
	
	.price-box {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
	
		.num {
			margin: 0 8upx;
			color: $font-color-dark;
		}
	
		.price {
			font-size: $font-lg;
			color: #E71E22;
			font-weight: bold;
	
			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}
	
	.border-partition {
		width: auto;
		height: 1rpx;
		background: #E5E5E5;
	}
	
	.return-center-box{
		width: auto;
		margin: 0 30rpx;
	}
	
	.return-botton{
		width: auto;
		margin: 60rpx 40rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		background: cornflowerblue;
	}
	
</style>
